<!-- 作者：举个栗子球 -->
<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>百鸽 生成 Markdown</title>
</head>
<body>
<input id="keywords" type="text" value="味美喵" />
<button id="searchBtn">查询</button>
<br />
=============================
<br />
<div id="result"></div>
<script>
  // https://ygocdb.com/api/v0/?search=
  // ![](https://cdn.233.momobako.com/ygopro/pics/31425736.jpg!half)
  function getData(name) {
    return fetch(`https://ygocdb.com/api/v0/?search=${ name }`)
      .then(res => res.json())
      .then(res => {
        console.log('🚀 ~ res', res);
        let rlt = `|卡图|描述|备注|<br/>`;
        rlt += `|:--:|:--:|:--:|<br/>`;
        res.result.forEach(item => {
          const { id, cn_name, sc_name, nwbbs_n, cnocg_n, jp_name, jp_ruby, wiki_en, text } = item;
          const desc = `id: ${ id }&lt;br\/&gt;${ sc_name }&lt;br\/&gt${ nwbbs_n }&lt;br\/&gt${ cnocg_n }&lt;br\/&gt${ wiki_en }&lt;br\/&gt${ jp_name }(${ jp_ruby })&lt;br\/&gt;
${ cn_name }&lt;br\/&gt;
${ text.types.replace(/\|/g, '\\|') }${ text.pdesc ? text.pdesc + '<br/>' : '' }&lt;br\/&gt;
${ text.desc.replace(/\n/g, '&lt;br\/&gt;') }`;
          rlt += `|![](https://cdn.233.momobako.com/ygopro/pics/${ item.id }.jpg!half)|${ desc }| |<br/>`;
        });
        console.log('🚀 ~ rlt', rlt);
        const elResult = document.getElementById('result');
        elResult.innerHTML = rlt;
      });
  }
  document.getElementById('searchBtn').onclick = function() {
    getData(document.getElementById('keywords').value);
  };
</script>
</body>
</html>
